<template>
  <div>
    <!-- 页面部分 -->
    <div class="xm-product-box">
        <div class="nav-bar">
            <div class="container">
                <h2>我的购物车温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</h2>
                <div class="con">
                    <div class="left"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="order-list">
        <table>
            <tr>
                <th>图片</th>
                <th>产品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
            <tr>
                <td><img :src="SeckillUrl" width="120" height="120" alt=""></td>
                <td>
                   {{this.SeckillName}}
                    请您在 6月16日 17:38 前下单, 结果以支付成功为准
                </td>
                <td>{{this.SeckillPrice}}元</td>
                <td>{{this.SeckillCount}}</td>
                <td>{{this.SeckillPrice}}元</td>
            </tr>
            <tr>
                <td colspan="5"><a href="javascript:void(0);" class="btn-order">立即下单</a></td>
            </tr>
        </table>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import baseUrl from "../evn";
export default {
  name: 'seckillorder',
  components: {
  
  },
  data(){
    return {
        "ProductId":this.$route.params.ProductId,
        "SeckillCount":this.$route.params.SeckillCount,
        "SeckillPrice":this.$route.params.SeckillPrice,
        "SeckillUrl":this.$route.params.SeckillUrl,
        "SeckillName":this.$route.params.SeckillName
    }
  },
  mounted() {
    this.createOrder();
  },
  methods: {
    createOrder(){
      var self = this;
      // 1、下单
      $(".btn-order").click(function () {
            var orderUrl = "http://localhost:5003/api/Order/";
            //var orderUrl = "http://47.104.70.197:5006/api/Order/";
            //var orderUrl = "http://118.190.162.238:30014/api/Order/";
            var data11 = {
                    "OrderTotalPrice": self.SeckillPrice,
                    "OrderItems": [
                        {
                            "ProductId": self.ProductId,
                            "ProductName": self.SeckillName,
                            "ProductCount": self.SeckillCount,
                            "ProductUrl": self.SeckillUrl
                        }
                    ]
                };
            $.ajax({
                method: "POST",
                url: orderUrl,
                contentType: 'application/json',
                dataType: 'JSON',
                data: JSON.stringify(data11),
                success: function (result) {
                    if (result.ErrorNo == "0") {
                        // 1、创建订单成功
                        var resultDic = result.ResultDic;
                        // 2、跳转到支付页面
                        self.$router.push({
                            name:"seckillorderpay",
                            params:{
                                "OrderId":resultDic.OrderId,
                                "OrderSn":resultDic.OrderSn,
                                "OrderTotalPrice":resultDic.OrderTotalPrice,
                                "UserId":resultDic.UserId,
                                "ProductId":resultDic.ProductId,
                                "SeckillName":self.SeckillName
                            }
                        });
                       // location.href = "/seckillorderpay?OrderId=" + resultDic.OrderId + "&OrderSn=" + resultDic.OrderSn + "&OrderTotalPrice=" + resultDic.OrderTotalPrice + "&UserId=" + resultDic.UserId + "&ProductId=" + resultDic.ProductId + "&ProductName=" + resultDic.ProductName +"";
                    } else {
                        alert(result.ErrorInfo);
                    }
                }
            })
        })
      }
    },
    getRequestId(){
      // 1、获取userId
      var user = this.getCache("user");

      // 2、从sessionStorage中获取requestId
      var requestId = sessionStorage.getItem(user.UserId);

      // 3、判断requestId是否存在
      if (!requestId) {
          requestId = this.createRequestId(user.UserId);
      }
      // 4、存储requestId
      this.aveRequestId(user.UserId, requestId);
      return requestId;
    },
    saveRequestId(userId, requestId) {
        // 1、存储requestId
        sessionStorage.setItem(userId, requestId);
    },
    createRequestId(UserId) {
        // return Number(Math.random().toString().substr(3, length) + Date.now() + UserId).toString(37);
        return (Date.now() + UserId).toString();
    }
};
</script>
<style>
.xm-product-box .nav-bar h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 60px;
        color: #424242;
        float: left;
    }
    .container {
        width: 1226px;
        margin-right: auto;
        margin-left: auto;
    }
    .xm-product-box .nav-bar {
        position: relative;
        height: 63px;
        width: 100%;
        margin-top: 0;
        color: #616161;
    }
    .xm-product-box {
        position: relative;
        z-index: 4;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 5px 5px rgba(0,0,0,.07);
    }
    .order-list table{
        width: 800px;
        height: 300px;
        border: solid 1px #ccc;
        border-collapse: collapse;
    }
    .order-list table th, .order-list table td{
        border: solid 1px #ccc;
        text-align: center;
        padding: 20px;
    }
    .order-list{
        width: 900px;
        height: 500px;
        margin: auto;
        margin-top: 30px;
    }
    .btn-order{
        display: block;
        width: 100px;
        height: 30px;
        margin: auto;
        text-decoration: none;
        background-color:#ff6700;
        text-align: center;
        line-height: 30px;
        color:#fff;
    }
</style>